import React from 'react'
class World extends React.Component {
  // 用class创建的不用像用函数那样需要用 props 就收
  data  // 定义，不需要let
  constructor() {
    super()
    console.log(' this.data: ', this.data)
    this.data = {
      msg: '这里就相当于vue中的 data() {return {}} 中的数据'
    }
    this.state = {
      value: '输入框中的默认值'
    }
  }
  render() {
    return (
      <div> 
        <hr/>
        <h3>这是一个组件, 这是用class创建的组件</h3>
        {this.props.name} -- { this.props.age}
        {this.props.title}
        <p>{this.data.msg}</p>
        <p>行内样式</p>
        <div style={{background: 'red', width: '200px', height: '400px'}}></div>
        input输入框框绑定
        <input type="text" value={this.state.value} onChange={(e) => this.inputChange(e) }/>
        <p>
          只读-- 不可编辑 当 this.state.value 的值变化时输入框中的值才会变化
          <input type="text" value={this.state.value} readOnly/>
        </p>
      </div>
    )
  };
  inputChange(e) {
    this.setState({
      value: e.target.value
    })
  }
}

export default World